<script setup lang="ts">
import useBiliStore from "@/store/modules/useBiliStore";
import useUserStore from "@/store/modules/useUserStore";
import MReplyPlugin from "./MReplyPlugin.vue";

const emit = defineEmits<{
  (event: "login"): void;
}>();
const biliStore = useBiliStore(),
  userStore = useUserStore();
const showReply = ref(false),
  rPlugin = biliStore.replyPlugin;

function noop() {}
function clickPlugin() {
  if (!userStore.hasLogin) return emit("login");
  showReply.value = true;
}
</script>

<template>
  <div
    class="flex flex-col w-50 h-30 p-4 border-2 border-solid border-gray-200 rounded-lg shadow-md shadow-gray-100"
    :class="[rPlugin.enabled ? 'shadow-red-100 border-red-200' : '']"
    @click="clickPlugin"
  >
    <div class="text-lg font-bold">回复姬</div>
    <div class="flex-1">
      <n-ellipsis :line-clamp="2" :tooltip="{ placement: 'top' }">
        发送弹幕,投喂礼物触发回复功能,支持自定义回复和定时回复
      </n-ellipsis>
    </div>
    <div v-if="userStore.hasLogin" class="flex-ec">
      <n-switch v-model:value="rPlugin.enabled" @click.stop="noop">
        <template #checked> 开启 </template>
        <template #unchecked> 关闭 </template>
      </n-switch>
    </div>
  </div>
  <MReplyPlugin v-model:show="showReply" />
</template>

<style scoped lang="scss"></style>
